<template>
  <view class="page">

    <Head title="我的好友" :transparency="1"></Head>

    <view class="card">
      <view class="label">我的好友(个)</view>
      <view class="value">{{ userTeam || "0" }}</view>
    </view>

    <view class="content">
      <view class="item">
        <image src="http://cdn.gtfy.net.cn/1inex/myTeam/friends.png" mode="scaleToFill" />
        <view class="nums-name">
          <text class="num">{{ userobj.share }}</text>
          <text class="name">我的好友</text>
        </view>
      </view>
      <view class="item" @click="toUrl('./record')">
        <image src="http://cdn.gtfy.net.cn/1inex/myTeam/gxz.png" mode="scaleToFill" />
        <view class="nums-name">
          <text class="num">{{ userobj.maxQuota || "0" }}</text>
          <text class="name">总业绩</text>
        </view>
      </view>
    </view>

    <!-- 好友列表 -->
    <view class="user-list">
      <view class="user" v-for="(item, i) in list" :key="item.id">
        <view class="name">{{ item.realName || "" }}</view>
        <view class="phone">{{ item.phone || "" }}</view>
        <view class="user-num">
          好友
          <text class="num">{{ item.remark || 0 }}</text>
          人
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { userInfoAPI } from "@/api/login.js"
import { teamListAPI } from "@/api/my.js"
// import { formatDate } from "../../utils/date.js"
import Head from "@/components/Head/index"
export default {
  filters: {
    formatDate(time) {
      var date = new Date(time)
      return formatDate(date, "yyyy-MM-dd hh:mm")
    },
  },
  data() {
    return {
      userobj: {},
      choselist: ["一级分销"],
      choseSign: "一级分销",
      list: [],
      current: 1,
      pageSize: 10,
      id: "",
      isRefresh: true,
      userTeam: "",
      team: "",
      achievement: "",
      maxQuota: 0,
    }
  },
  created() {
    this.getinfo()
  },
  onLoad(option) {
    this.id = option.id
    this.getmyfans()
  },
  methods: {
    async getinfo() {
      let res = await userInfoAPI()
      if (res.code == 200) {
        this.userobj = res.data
      }
    },
    async getmyfans() {
      let res = await teamListAPI()
      if (res.code == 200) {
        this.list = res.data.list
        this.team = res.data.team //团队人数
        this.userTeam = res.data.userTeam
        this.maxQuota = res.data.maxQuota
      }
    },
    choseChange(item) {
      this.choseSign = item
    },
  },
  components: { Head },
}
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;

  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;

  box-sizing: border-box;
  padding-top: calc(var(--status-bar-height) + 100rpx);

  .card {
    width: 750rpx;
    height: 207rpx;

    background-image: url(http://cdn.gtfy.net.cn/1inex/myTeam/card.png);
    background-size: cover;

    box-sizing: border-box;
    padding: 47rpx 0 49rpx 66rpx;

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: flex-start;

    .label {
      width: 100%;
      font-size: 26rpx;
      height: 26rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: 500;
      color: #ffffff;
    }

    .value {
      width: 100%;
      font-size: 62rpx;
      height: 62rpx;
      font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
      font-weight: 800;
      color: #ffffff;
    }
  }

  .content {
    width: 750rpx;
    min-height: 130rpx;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-content: space-between;

    box-sizing: border-box;
    padding: 30rpx 40rpx 40rpx 40rpx;

    .item {
      width: 325rpx;
      height: 123rpx;
      background: #f7f7f7;

      box-sizing: border-box;
      padding: 30rpx 20rpx;
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;

      image {
        width: 62rpx;
        height: 62rpx;
        margin-right: 18rpx;
      }

      .nums-name {
        flex: 1;
        min-width: 147rpx;
        height: 67rpx;

        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: flex-start;

        .num {
          line-height: 36rpx;
          font-size: 28rpx;
          font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
          font-weight: bold;
          color: #333333;
        }

        .name {
          line-height: 24rpx;
          font-size: 24rpx;
          font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
          font-weight: bold;
          color: #666666;
        }
      }
    }
  }

  .user-list {
    width: 700rpx;

    .user {
      width: 700rpx;
      height: 100rpx;
      background: #f7f7f7;

      box-sizing: border-box;
      padding: 0 20rpx;
      margin-bottom: 20rpx;

      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;

      .name {
        margin-right: 15rpx;
      }

      .phone {
        flex: 1;
        min-width: 181rpx;
        height: 28rpx;
        font-size: 28rpx;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        font-weight: 500;
        color: #999999;
        margin-right: 15rpx;
      }

      .user-num {
        flex: 1;
        font-size: 28rpx;
        font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti, MingLiu;
        font-weight: 500;
        color: #333333;

        .num {
          color: #f5340d;
        }
      }
    }
  }
}
</style>
